import { useState } from 'react';
import { Button } from 'antd-mobile';

const Exposure = () => {
	const [isShow, setIsShow] = useState(false);
	const [list] = useState(['user-01', 'user-02', 'user-03', 'user-04']);

	const showData = () => {
		setIsShow(!isShow);
	};

	return (
		<div>
			<div data-exposure='exposure1'>exposure1</div>

			<Button color='primary' size='middle' onClick={showData}>
				显示动态数据
			</Button>

			{/* Dynamic content */}
			{isShow && (
				<div>
					{list.map(item => (
						<div key={item} data-exposure={item}>
							{item}
						</div>
					))}
				</div>
			)}

			{/* Scroll spacer */}
			<div style={{ width: '100px', height: '3000px', background: 'blue' }}>
				box
			</div>

			{/* Another static element */}
			<div data-exposure='exposure2'>exposure2</div>
		</div>
	);
};

export default Exposure;
